<template>
  <main-page>
    <div slot="body">
      <!--TODO-->
      <div style="margin-bottom: 10px">
        <el-alert title="说明" show-icon type="info" :closable="false">
          <dl>
            <dd>
              1. 参数中获取节点的规则可以按照Jsoup的规则来获取, 详情看地址：
              <strong style="color: #000">
                <a
                  href="https://www.open-open.com/jsoup/selector-syntax.htm"
                  target="_blank"
                >https://www.open-open.com/jsoup/selector-syntax.htm</a>
              </strong>
            </dd>
          </dl>
        </el-alert>
      </div>
      <el-form :inline="true" :model="search" size="mini">
        <el-form-item>
          <el-button type="info" @click="getJobsList">查询</el-button>

          <el-button type="primary" @click="dialogFormVisible = true;">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" style="width: 100%" tooltip-effect="dark">
        <el-table-column prop="id" label="id" width="80"></el-table-column>
        <el-table-column prop="jobName" label="任务名称"></el-table-column>
        <el-table-column prop="jobDesc" label="描述" show-overflow-tooltip></el-table-column>
        <el-table-column label="任务类名" width="380" prop="jobClazz"></el-table-column>
        <el-table-column prop="cron" label="定时表达式">
          <template slot-scope="scope">
            <el-popover placement="top" trigger="click" title="表达式">
              <el-input v-model="scope.row.cron"></el-input>
              <div style="text-align: right; margin: 5px 0 0 0">
                <el-button type="primary" size="mini" @click="updateCron(scope.row)">确定</el-button>
              </div>
              <a href="javascript:;" slot="reference">{{scope.row.cron}}</a>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="额外参数" min-width="400">
          <template slot-scope="scope">
            <template v-if="scope.row.extra != ''">
              <json-viewer copyable :value="JSON.parse(scope.row.extra)"></json-viewer>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="是否开始执行">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.isEnable == 0 ? '锁定' : '执行'" placement="top">
              <el-switch
                v-model="scope.row.isEnable"
                :active-value="1"
                :inactive-value="0"
                @change="updateIsEnable(scope.row)"
              ></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180">
          <template slot-scope="scope">{{scope.row.createTime | datetime}}</template>
        </el-table-column>

        <el-table-column label="操作" fixed="right" width="120">
          <template slot-scope="scope">
            <el-button
              type="warning"
              icon="el-icon-edit"
              circle
              title="编辑"
              size="small"
              @click="handleClick2EditById(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              title="删除"
              size="small"
              @click="handleClick2DeleteById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination :listNum="listNum" @currentChange="handleCurrentChange"></pagination>

      <el-drawer
        title="任务管理"
        :visible.sync="dialogFormVisible"
        direction="ltr"
        custom-class="demo-drawer"
        size="40%"
      >
        <div class="demo-drawer__content" style="padding:20px">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="任务名称" prop="jobName">
              <el-input v-model="form.jobName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="jobDesc">
              <el-input v-model="form.jobDesc" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="任务类名" prop="jobClazz">
              <el-input v-model="form.jobClazz" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="表达式" prop="cron">
              <el-input v-model="form.cron" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="额外参数" prop="extra">
              <el-input type="textarea" v-model="form.extra" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="立即执行" prop="isEnable">
              <!-- active-color="#13ce66"
              inactive-color="#ff4949"-->
              <el-switch v-model="form.isEnable" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
          </div>
        </div>
      </el-drawer>
    </div>
  </main-page>
</template>

<script>
import {
  getJobsList,
  getJobsAllList,
  saveJobs,
  deleteJobs,
  updateJobsById
} from "api/JobsApi";

import JsonViewer from "vue-json-viewer";

export default {
  name: "JobsList",
  components: {
    JsonViewer
  },
  data() {
    return {
      search: {
        currentIndex: 1
      },
      form: {
        id: "",
        jobClazz: "",
        jobName: "",
        jobDesc: "",
        extra: "",
        cron: "",
        isEnable: ""
      },
      rules: {
        jobClazz: [{ required: true, message: "请输入可执行的类全名" }],
        jobName: [{ required: true, message: "请输入任务名称" }],
        cron: [{ required: true, message: "请输入正确的表达式" }]
      },
      tableData: [],
      listNum: 1,
      dialogFormVisible: false
    };
  },
  methods: {
    getJobsList() {
      getJobsList(this.search).then(res => {
        this.tableData = res.datas;
        this.listNum = res.pagination.totalCount;
      });
    },
    handleCurrentChange(page) {
      this.search.currentIndex = page;
      this.getJobsList();
    },
    onSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.id) {
            //修改
            this.updateJobsById();
          } else {
            //保存
            saveJobs(this.form).then(res => {
              if (res) {
                this.$base.showOk();
                this.dialogFormVisible = false;
                this.getJobsList();
              }
            });
          }
        }
      });
    },
    handleClick2EditById(row) {
      this.dialogFormVisible = true;
      this.$base.set2Form(this.form, row);
    },
    handleClick2DeleteById(id) {
      this.$base.deleteConfirm(() => {
        deleteJobs({ id }).then(res => {
          if (res) {
            this.$base.deleteOk();
            this.getJobsList();
          }
        });
      });
    },
    updateIsEnable(row) {
      this.$base.set2Form(this.form, row);
      this.updateJobsById();
    },
    updateCron(row) {
      this.$base.set2Form(this.form, row);
      this.updateJobsById();
    },
    updateJobsById() {
      updateJobsById(this.form).then(res => {
        if (res) {
          this.$base.showOk();
          this.dialogFormVisible = false;
          this.getJobsList();
        }
      });
    }
  },
  created() {
    this.getJobsList();
  },
  watch: {
    dialogFormVisible(newDialogFormVisible) {
      if (!newDialogFormVisible) {
        this.$base.clearObj(this.form);
      }
    }
  }
};
</script>

<style lang="stylus" scoped></style>